<script setup>
import {ElDialog} from "element-plus";

import {ref, watch, computed} from 'vue'
import DialogName from "@/components/admin/dialogName.vue";
import DialogNewName from "@/components/admin/dialogNewName.vue";

const props = defineProps(['updateRotaDataProps', 'powerProps'])
const emit = defineEmits(['yesUpdateRotaEmit'])

const classHour = ['第一、二节课', '第三、四节课', '第五、六节课', '第七、八节课', '第九、十节课'];
const columns = ["星期一", "星期二", "星期三", "星期四", "星期五"];
const week = ref(null)
const course = ref(null)


const updateRotaData = ref(null)
const power = ref(props.powerProps)
watch(props, (val) => {
  updateRotaData.value = JSON.parse(JSON.stringify(val.updateRotaDataProps))
  week.value = columns[updateRotaData.value.y]
  course.value = classHour[updateRotaData.value.x]
})

const showDialog = ref(false);

const yesUpdateRota = () => {
  emit('yesUpdateRotaEmit', updateRotaData.value)
  showDialog.value = false
}

// 计算属性：根据设备类型返回不同的宽度
const dialogWidth = computed(() => {
  if (isMobileDevice()) {
    return '85%';
  } else {
    return '40%';
  }
});

// 检测是否为移动端设备
function isMobileDevice() {
  const { innerWidth, innerHeight } = window;
  return innerHeight > innerWidth;
}

const ifShowDialog = () => {
  if (power.value === 'admin') {
    showDialog.value = true
  }
}
</script>

<template>
  <slot :onClick="() => {ifShowDialog()}"/>
  <el-dialog v-model="showDialog"
             :title="'正在编辑“' + week + ' ' + course + '”的值班信息'"
             append-to-body
             :width="dialogWidth"
             draggable
  >
    <el-form>
      <div>
        <el-header>
          <template v-if="updateRotaData.names.length === 0"><h3>暂无值班人员</h3></template>
          <template v-else><h3>值班人数：{{ updateRotaData.names.length }}</h3></template>
        </el-header>
        <el-scrollbar height="300px">
          <template v-if="updateRotaData.names.length === 0">
            <DialogNewName :user-name-list-props="updateRotaData.names"></DialogNewName>
          </template>
          <template v-else>
            <el-form-item v-for="(item, index) in updateRotaData.names" :key="index">
              <DialogName :user-name-props="item" :user-name-list-props="updateRotaData.names"/>
            </el-form-item>
          </template>
        </el-scrollbar>
        <el-footer>
          <el-form-item>
            <el-button type="primary" @click="yesUpdateRota">确定</el-button>
            <el-button @click="showDialog = false">取消</el-button>
          </el-form-item>
        </el-footer>
      </div>
    </el-form>
  </el-dialog>

</template>

<style scoped>
.el-form {
  display: flex;
  align-items: center;
  justify-content: center;
  /*竖向排列*/
  flex-direction: column;
}
.el-footer {
  margin-top: 35px;
  display: flex;
  justify-content: center;

}

</style>